<!-- D:/project/en2_haiou/haiou-en2-pc/static/images/general -->
<template>
  <div class="combody">
    <div class=" container">
      <div class="top justify-between align-center">
        <div class="top_left">Welcome to the Yiban Travel official website! Yiban Travel focuses on medication
          information, medical treatment in Japan, clinical recruitment, remote consultation</div>
        <ul class=" top_right flex-row align-center">
          <li>Medicine Map</li>
          <li>Website navigation</li>
        </ul>
      </div>
      <div class="center borderbox justify-between align-center">
        <nuxt-link to="/">
          <img class="headlogo" src="@/static/images/general/headlogo.png" alt="">
        </nuxt-link>
        <div class="searchbox flex-row justify-between">
          <input class="search_input borderbox" placeholder="Enter a drug name, condition, pill imprint, etc."
            type="text">
          <div class="search_btn align-center justify-center csp">
            <img class="searchlogo" src="@/static/images/general/search.png" alt="">
          </div>
        </div>
      </div>
      <ul class="bot flex-row">
        <li>Home</li>
        <li>Products <img class="down" src="@/static/images/general/botjt.png" alt=""></li>
        <li>News</li>
        <li>Oncology</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.combody {
  // height: 200px;
  padding-bottom: 24px;
  background: url(../static/images/general/headbg.png) no-repeat;
  background-size: cover;

  .top {
    height: 40px;

    .top_left {
      color: #8A95A2;
      font-weight: 400;
      font-size: 12px;
      text-align: left;
    }

    .top_right {
      height: 100%;

      li {
        font-weight: 400;
        font-size: 12px;
        color: #2E343E;
        text-align: left;
        margin-left: 24px;
      }
    }
  }

  .center {
    padding: 24px 21px 24px 0;

    .headlogo {
      width: 338px;
    }

    .searchbox {
      width: 800px;
      height: 56px;

      input::placeholder {
        color: #8A95A2;
      }

      .search_input {
        padding: 18px 24px;
        font-weight: 400;
        font-size: 18px;
        text-align: left;
        border: none;
        width: 704px;
        height: 56px;
        border-radius: 16px 0 0 16px;
      }

      .search_btn {
        width: 96px;
        height: 56px;
        border-radius: 0px 16px 16px 0px;
        background: #0041A3;

        .searchlogo {
          width: 32px;
        }
      }
    }
  }

  .bot {
    height: 24px;

    li {
      font-weight: bold;
      font-size: 20px;
      color: #2E343E;
      text-align: left;
      margin-right: 32px;
      display: flex;
      align-items: center;

      .down {
        width: 24px;
      }
    }
  }
}
</style>